[Android] 新しいレイアウト登場！Constraint Layoutについて

はじめに

GoogleIO2016でAndroidSutudio2.2（現在はpreview1版）が発表され、新しいUI Designerと新レイアウトとしてConstraint Layoutが登場しました。
Constraint Layoutの個人的な初見の感想としてはiOSのAutoLayoutっぽいなと思いました。
今回はそんなConstraint Layoutの簡単な使い方をご紹介致します。

Constraint Layoutとは

Android Studio 2.2 Preview - New UI Designer & Constraint Layout のConstraint Layoutの項目を見てみると、

• 複数のレイアウトをネストすることなく柔軟に配置出来る
• API Level 9 の後方互換
• Studio（エディタ）で使用するように設計され、自動的にレイアウトのXMLを生成してくれる

のような特徴がある様です。
また、現時点では早期プレビュー版であるため、今後のリリースでより良くなっていくことでしょう。

準備

現時点でConstraint Layoutを試そうとするとAndroidSutudio2.2(preview)が必要になります。
Android Studio Dev Channel｜Android Studio Project Site

また、下記の準備をします

Android Support Repository version 32以上が必要です。

Support Repositoryの確認はClick Tools > Android > SDK Manager.
Android SDK画面のSDK Toolsタブから確認(インストール)できます。

build.gradle内にConstraint Layout libraryを追加します。

dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
}

※上記を追記したらツールバーのSync Project with Gradle Filesをクリックします。

レイアウトファイルを作成

Constraint LayoutとしてXMLを作成

New > XML > Layout XML としてファイルをレイアウトXMLを作成する際に、 Root Tagを下記にします。

android.support.constraint.ConstraintLayout

Constraint Layoutに変換する

既に作成済みのファイルの場合は, デザインレイアウトを表示し、Component Tree ウィンドウでレイアウトを右クリックして、 Convert to ConstraintLayout をクリックします。

制約を追加する

Autoconnect

レイアウトエディタでAutoconnectと呼ばれる機能があります。 切り替えはこのボタンでON/OFFを切り替えられる様です。

ONの時にコンポーネントを置くと自動で最適？なレイアウトの矢印が伸びます。

※ アニメーションが動かない場合は画像をクリックして下さい。

制約の追加

手動で○の部分を引っ張っても制約を付けることが出来ます。
親ConstraintLayout間の制約を作成するには、クリックして○をレイアウトの端にドラッグします。 また、制約を付けた後、コンポーネントを動かして制約を更新することが出来ます。

位置関係だけでなくベースラインを設定することも出来ます。 真ん中くらいにある細長い上にカーソルをのせて、一瞬光ったらドラッグする感じです。

※ アニメーションが動かない場合は画像をクリックして下さい。

制約のクリア

下記ボタンを押と制約がクリアされます。


※ アニメーションが動かない場合は画像をクリックして下さい。

プロパティによる設定

対象のコンポーネントを選択して右側のウィンドウで値を設定することが出来ます。

※ アニメーションが動かない場合は画像をクリックして下さい。

また、右上のボタンを押すと詳細な設定が出来ます。

※ アニメーションが動かない場合は画像をクリックして下さい。

Infer constraints

編集の任意の時点で下記のInfer constraintsボタンを押すと、 レイアウト内のすべてのビューの制約を作成することを要求することができます。


※ アニメーションが動かない場合は画像をクリックして下さい。

さいごに

現時点では慣れないので正直xmlで書いた方がやりやすいです。 が、機能や使いやすさが向上したら、（また、開発者が慣れてきたら）直感的にレイアウトが作れて、開発スピードが上がるのかもしれません。

参考

• New Layout Editor with Constraint Layout｜Android Studio Project Site
• Android Studio 2.2 Preview - New UI Designer & Constraint Layout